<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>六上第3课《算法设计》破解密码锁</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .lock-open {
            animation: openAnimation 0.8s ease-out forwards;
        }

        .lock-shake {
            animation: shakeAnimation 0.5s ease-in-out;
        }

        .pulse-glow {
            animation: pulseGlow 2s ease-in-out infinite alternate;
        }

        @keyframes openAnimation {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
            100% { transform: translateY(-10px) rotate(0deg); }
        }

        @keyframes shakeAnimation {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
            20%, 40%, 60%, 80% { transform: translateX(3px); }
        }

        @keyframes pulseGlow {
            from { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
            to { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6); }
        }

        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .card-light {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .success-animation {
            animation: successPulse 0.6s ease-in-out;
        }

        @keyframes successPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body class="min-h-screen gradient-bg">
    <!-- 游戏内容 -->
    <div id="gameContent" class="min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-lg">
            <!-- 游戏标题区域 -->
            <div class="text-center mb-8">
                <h1 class="text-5xl font-bold text-white mb-2 drop-shadow-lg">
                    🔒 破解密码锁
                </h1>
                <p class="text-blue-100 text-lg">六上第3课《算法设计》破解密码锁</p>
            </div>

            <!-- 计时器卡片 -->
            <div class="card-effect rounded-xl p-4 mb-6 shadow-lg">
                <div class="flex items-center justify-center">
                    <div class="bg-blue-50 rounded-lg px-4 py-2">
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-700 text-lg font-medium">用时：</span>
                            <span id="timerText" class="text-blue-600 text-xl font-mono font-bold">0.00</span>
                            <span class="text-gray-600 text-sm">秒</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 密码锁显示区域 -->
            <div class="card-effect rounded-xl p-8 mb-6 shadow-lg">
                <div class="flex justify-center mb-6">
                    <div class="relative">
                        <svg id="lockIcon" width="120" height="120" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="drop-shadow-lg">
                            <rect x="5" y="10" width="14" height="10" fill="#E2E8F0" stroke="#4A5568" stroke-width="2" rx="2"/>
                            <circle cx="8" cy="15" r="1.5" fill="#4A5568"/>
                            <circle cx="12" cy="15" r="1.5" fill="#4A5568"/>
                            <circle cx="16" cy="15" r="1.5" fill="#4A5568"/>
                            <path d="M7 10V7C7 5.34315 8.34315 4 10 4H14C15.6569 4 17 5.34315 17 7V10" stroke="#4A5568" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        <div id="lockStatus" class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center">
                            <span class="text-white text-xs">🔒</span>
                        </div>
                    </div>
                </div>

                <p class="text-center text-gray-700 text-base mb-6">
                    ℹ️ 输入正确的3位密码以打开锁 (范围: 000 ~ 200)
                </p>
            </div>

            <!-- 密码输入区域 -->
            <div class="card-effect rounded-xl p-6 mb-6 shadow-lg">
                <div class="flex justify-center space-x-4 mb-6">
                    <input type="text" id="digit1" maxlength="1" class="w-16 h-16 text-2xl font-bold text-center border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200 bg-white">
                    <input type="text" id="digit2" maxlength="1" class="w-16 h-16 text-2xl font-bold text-center border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200 bg-white">
                    <input type="text" id="digit3" maxlength="1" class="w-16 h-16 text-2xl font-bold text-center border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200 bg-white">
                </div>

                <div id="result" class="text-center"></div>
            </div>

            <!-- 重置按钮 -->
            <div class="text-center">
                <button id="resetButton" onclick="resetGame()" disabled class="bg-gray-300 text-gray-500 font-medium py-3 px-6 rounded-xl transition-all duration-200 cursor-not-allowed">
                    🔄 重新开始
                </button>
            </div>
        </div>
    </div>


    <script>
        // 随机生成3位密码
        let password = (Math.floor(Math.random() * 201)).toString().padStart(3, '0');
        console.log(password);

        const inputs = document.querySelectorAll('input');
        const resultElement = document.getElementById('result');
        const timerText = document.getElementById('timerText');
        const lockIcon = document.getElementById('lockIcon');
        const lockStatus = document.getElementById('lockStatus');
        const resetButton = document.getElementById('resetButton');

        let timer = null;
        let milliseconds = 0;
        let isGameWon = false;

        function startTimer() {
            timer = setInterval(() => {
                milliseconds++;
                timerText.innerHTML = (milliseconds / 100).toFixed(2);
            }, 10);
        }

        function stopTimer() {
            clearInterval(timer);
        }

        // 重置游戏
        function resetGame() {
            // 重新生成密码
            password = (Math.floor(Math.random() * 201)).toString().padStart(3, '0');
            console.log(password);

            // 清空输入框
            inputs.forEach(input => {
                input.value = '';
                input.classList.remove('border-green-500', 'border-red-500');
                input.classList.add('border-gray-300');
            });

            // 重置计时器
            stopTimer();
            milliseconds = 0;
            timerText.innerHTML = '0.00';
            startTimer();

            // 重置结果区域
            resultElement.innerHTML = '';

            // 重置锁图标
            lockIcon.innerHTML = `
                <rect x="5" y="10" width="14" height="10" fill="#E2E8F0" stroke="#4A5568" stroke-width="2" rx="2"/>
                <circle cx="8" cy="15" r="1.5" fill="#4A5568"/>
                <circle cx="12" cy="15" r="1.5" fill="#4A5568"/>
                <circle cx="16" cy="15" r="1.5" fill="#4A5568"/>
                <path d="M7 10V7C7 5.34315 8.34315 4 10 4H14C15.6569 4 17 5.34315 17 7V10" stroke="#4A5568" stroke-width="2" stroke-linecap="round"/>
            `;

            // 重置锁状态
            lockStatus.innerHTML = '<span class="text-white text-xs">🔒</span>';
            lockStatus.className = 'absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center';

            // 重置游戏状态
            isGameWon = false;

            // 禁用重置按钮
            resetButton.disabled = true;
            resetButton.className = 'bg-gray-300 text-gray-500 font-medium py-3 px-6 rounded-xl transition-all duration-200 cursor-not-allowed';

            // 聚焦第一个输入框
            inputs[0].focus();
        }

        // 在密码正确时修改SVG并添加动画
        function openLock() {
            const lockContainer = lockIcon.parentElement;
            lockContainer.classList.add('success-animation');

            lockIcon.innerHTML = `
                <rect x="5" y="10" width="14" height="10" fill="#10B981" stroke="#059669" stroke-width="2" rx="2"/>
                <circle cx="8" cy="15" r="1.5" fill="#059669"/>
                <circle cx="12" cy="15" r="1.5" fill="#059669"/>
                <circle cx="16" cy="15" r="1.5" fill="#059669"/>
                <path d="M7 7C7 5.34315 8.34315 4 10 4H14C15.6569 4 17 5.34315 17 7V8" stroke="#059669" stroke-width="2" stroke-linecap="round" class="lock-open"/>
            `;

            // 更新锁状态图标
            lockStatus.innerHTML = '<span class="text-white text-xs">✅</span>';
            lockStatus.className = 'absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center pulse-glow';

            // 启用重置按钮
            resetButton.disabled = false;
            resetButton.className = 'bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-xl transition-all duration-200 transform hover:scale-105';

            isGameWon = true;
        }

        // 添加锁抖动效果
        function shakeLock() {
            const lockContainer = lockIcon.parentElement;
            lockContainer.classList.add('lock-shake');

            setTimeout(() => {
                lockContainer.classList.remove('lock-shake');
            }, 500);
        }

        // 输入框自动跳转
        inputs.forEach((input, index) => {
            input.addEventListener('input', (e) => {
                const value = e.target.value;

                // 只允许输入数字
                if (!/^\d*$/.test(value)) {
                    e.target.value = '';
                    return;
                }

                // 自动跳转到下一个输入框
                if (value.length === 1 && index < inputs.length - 1) {
                    inputs[index + 1].focus();
                }

                // 检查是否所有输入框都已填写
                if ([...inputs].every(i => i.value.length === 1)) {
                    const userInput = [...inputs].map(i => i.value).join('');

                    if (userInput === password) {
                        stopTimer();
                        resultElement.innerHTML = `
                            <div class="bg-green-500 bg-opacity-20 border border-green-400 text-green-800 px-6 py-4 rounded-xl">
                                <div class="flex items-center justify-center">
                                    <i class="fas fa-trophy text-yellow-500 text-2xl mr-3"></i>
                                    <div>
                                        <div class="text-lg font-bold">恭喜你，密码正确！</div>
                                        <div class="text-sm">用时：${(milliseconds / 100).toFixed(2)}秒</div>
                                    </div>
                                </div>
                            </div>
                        `;

                        // 添加成功样式到输入框
                        inputs.forEach(input => {
                            input.classList.remove('border-gray-300', 'border-red-500');
                            input.classList.add('border-green-500', 'bg-green-50');
                        });

                        openLock();
                    } else {
                        shakeLock();
                        resultElement.innerHTML = `
                            <div class="bg-red-500 bg-opacity-20 border border-red-400 text-red-800 px-6 py-4 rounded-xl">
                                <div class="flex items-center justify-center">
                                    <i class="fas fa-times-circle text-red-500 text-xl mr-3"></i>
                                    <div>
                                        <div class="text-lg font-bold">密码错误</div>
                                        <div class="text-sm">请重试</div>
                                    </div>
                                </div>
                            </div>
                        `;

                        // 添加错误样式到输入框
                        inputs.forEach(input => {
                            input.classList.remove('border-gray-300', 'border-green-500');
                            input.classList.add('border-red-500');
                        });

                        // 2秒后清除错误提示，但保留输入框内容
                        setTimeout(() => {
                            if (!isGameWon) {
                                // 只清除错误样式，不清空输入框内容
                                inputs.forEach(input => {
                                    input.classList.remove('border-red-500');
                                    input.classList.add('border-gray-300');
                                });
                                resultElement.innerHTML = '';
                            }
                        }, 2000);
                    }
                }
            });

            // 支持退格键跳转到上一个输入框
            input.addEventListener('keydown', (e) => {
                if (e.key === 'Backspace' && e.target.value === '' && index > 0) {
                    inputs[index - 1].focus();
                }
            });

            // 限制只能输入数字
            input.addEventListener('keypress', (e) => {
                if (!/\d/.test(e.key) && e.key !== 'Backspace') {
                    e.preventDefault();
                }
            });
        });

        window.onload = function() {
            startTimer();
            // 聚焦第一个输入框
            inputs[0].focus();
        };

    </script>
</body>
</html>
